<template>
    <div id="phoneRegister">
        <navbar :title="title"></navbar>
        <div class="placeholder"></div>
         <div class="form">
            <div class="form-item">
                <span class="label">
                    <i class="icon icon-phone"></i>
                    手机号
                </span>
                <input type="number" name="phonenumber" placeholder="请输入11位手机号" v-model="phonenumber" autocomplete="off">
            </div>
            <div class="form-item">
                <span class="label">
                    <i class="icon icon-code"></i>
                    验证码
                </span>
                <input type='text' class="phoneCode" name="phoneCode" placeholder="请输入验证码" v-model="phoneCode" autocomplete="off" @keyup="phoneCode=phoneCode.replace(/[\u4e00-\u9fa5]/g,'')">
                <div class="getCodeBtn">
                    <button @click="sendCode" v-text="btnTxt" :disabled=btnStatus></button>
                </div>
            </div>
            <div class="form-item">
                 <span class="label">
                    <i class="icon icon-pwd"></i>
                    密码
                </span>
                <input :type="pswType==true?'password':'text'"  class="password" name="password" placeholder="请输入6-16位登录密码" v-model="password" @keyup="password=password.replace(/[\u4e00-\u9fa5]/g,'')" autocomplete="off">
                <span class="showPwd pwdType" v-show="!pswType" @click="changePwd"></span>
                <span class="hidePwd pwdType" v-show="pswType" @click="changePwd"></span>
            </div>
            <div class="agreement">
                <label :class="{active:checked}" @click="checkBox"><i></i>注册即同意</label>
                <span @click="openAgreement">《用户协议》</span>
            </div>
            <div class="button">
                <button @click="loginSubmit" :class="{'btndisabled':!checked}">立即注册</button>
                <div class="more">
                    <router-link tag="a" to='./register' replace>用户名注册</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import navbar from 'common/navbar'
    import { Toast } from 'vant';
    import {userReg,sendCode,checkphone,login} from 'api/login';
    import api from 'api/api';
    import {mapMutations} from 'vuex'
    export default {
        data(){
            return{
                title:"手机快速注册",
                btnStatus:false,
                phonenumber:'',
                phoneCode:'',
                password:'',
                btnTxt:'获取验证码',
                pswType:true,
                checked:true
            }
        },
        methods:{
            back(){
                 this.$router.go(-1);
            },
            changePwd(){
                this.pswType=!this.pswType;
            },
            checkBox(){
                this.checked=!this.checked;
            },
            sendCode(){
                let phonereg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
                if(this.phonenumber.length==0){
                    Toast('请输入手机号');
                    return;
                }else if(!phonereg.test(this.phonenumber)){
                    Toast('请输入正确的手机号');
                    return false;
                }else{
                    let _this=this;
                    new Promise(_this.sendCodeStep1).then(function(val){
                        return new Promise(_this.sendCodeStep2);
                    }).then(function(val){
                        return val;
                    }).catch(function(error) {
                        console.log('error: ' + error);
                    });
                }
            },
            sendCodeStep1(resolve,reject){
                checkphone(this.phonenumber,2).then(res=>{
                    if(res.data.error==0){
                        resolve("检测完成")
                    }else{
                        reject("检测失败")
                    }
                })
            },
            sendCodeStep2(resolve,reject){
                sendCode(this.phonenumber).then(res=>{
                    if(res.data.error==0){
                        resolve("发送成功")
                        Toast("已成功发送");
                        let time=60;
                        let codeTimer=setInterval(()=>{
                            this.btnStatus=true;
                            time--;
                            if(time<=0){
                                this.btnStatus=false;
                                this.btnTxt='重新获取';
                                clearInterval(codeTimer);
                            }else{
                                this.btnTxt=`${time}s`;
                            }
                        },1000)
                    }else{
                        reject("发送失败")
                    }
                });
            },
            openAgreement(){
                window.location.href="http://mapi.17byh.com/agreement.html"
            },
            loginSubmit(){
                let phonereg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
                if(this.checked==false){
                    Toast("请勾选用户协议");
                    return;
                }else if(this.phonenumber.length==0){
                    Toast("请输入手机号");
                    return;
                }else if(!phonereg.test(this.phonenumber)){
                    Toast('请输入正确的手机号');
                    return false;
                }else if(this.phoneCode.length==0){
                    Toast("请输入验证码");
                    return;
                }else if(this.password.length==0){
                    Toast("请输入密码");
                    return;
                }else{
                    userReg(1,this.phonenumber,"",this.password,this.phoneCode).then(res=>{
                        if(res.data.error==0){
                           login(this.phonenumber,this.password).then(res=>{
                                if(res.data.error==0){
                                    this.SET_LOGININFO(res.data.content);
                                    this.$router.push({
                                        path: '/index'
                                    });
                                }
                            })
                        }
                    })
                }
            },
             ...mapMutations(['SET_LOGININFO'])
        },
        components:{
            navbar
        },
        destroyed(){
            Toast.clear();
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins';
.placeholder{
    width:100%;
    height:0.8rem;
}
.btndisabled{
    background:#ddd !important;
}
#phoneRegister{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#fff;
    z-index:1000;
    width: 7.5rem;
    margin:0 auto;
    overflow-y:scroll;
    .form{
         margin-top:0.72rem;
         .form-item{
             position:relative;
             margin: 0.3rem auto 0;
             padding:0 0.2rem 0 1.7rem;
             width: 6.64rem;
             height: 0.9rem;
             line-height: 0.9rem;
             border: 1px solid #cbcbcb;
             border-radius: 10px; 
             &:last-child{
                 margin:0 auto;
             }
             input{
                width:100%;
                height:100%;
                line-height:100%;
                padding-left:0.12rem;
                border:none;
                box-sizing: border-box;
                font-size:0.28rem;
                background: transparent;
            }
            .password{
               padding-right:0.6rem;
            }
            .pwdType{
                position: absolute;
                top: 50%;
                right: 0.2rem;
                transform: translateY(-50%);
            }
            .showPwd{
                width:0.37rem;
                height:0.24rem;
                background-size: 0.37rem 0.24rem;
                @include bg-image('../../assets/image/icon_codezs');
            }
            .hidePwd{
                width:0.44rem;
                height:0.20rem;
                margin-top:0.05rem;
                background-size: 0.44rem 0.20rem;
                @include bg-image('../../assets/image/icon_code');
            }
            .phoneCode{
                width:2.6rem;
            }
             .label{
                 position:absolute;
                 top:50%;
                 transform: translateY(-50%);
                 left:0.3rem;
                 font-size:$font-size-m;
                 color:$color-text;
                 .icon{
                     display:inline-block;
                     margin-right:0.1rem;
                     background-size:100% 100%;
                     background-repeat: no-repeat;
                     vertical-align: top;
                     &.icon-phone{
                        width:0.3rem;
                        height:0.48rem;
                        margin-top:0.21rem;
                        @include bg-image('../../assets/image/icon_phone');
                     }
                     &.icon-code{
                        width:0.36rem;
                        height:0.45rem;
                        margin-top:0.22rem;
                        @include bg-image('../../assets/image/icon_yzm');
                     }
                     &.icon-pwd{
                         width:0.38rem;
                         height:0.42rem;
                         margin-top:0.24rem;
                         @include bg-image('../../assets/image/icon_mima');
                     }
                 }
             }
             .getCodeBtn{
                 position:absolute;
                 top:50%;
                 right:0.18rem;
                 transform:translateY(-50%);
                 button{
                     width:1.6rem;
                     height:0.5rem;
                     line-height:0.5rem;
                     font-size:0.24rem;
                     color:#fff;
                     background:$color-focus;
                     border:none;
                     border-radius:0.25rem;
                     &:disabled{
                         background:#ddd;
                         color:#f9f9f9;
                     }
                 }
             }
         }
         .button{
             width:6.6rem;
             margin:0.8rem auto 0 auto;
            button{
               @include login-btn();
            }
            .more{
                text-align:right;
                margin-top:0.2rem;
                padding-right:0.2rem;
                font-size:$font-size-m;
                a{
                    color:$color-focus;
                }
            }
         }
     }
    .agreement{
        margin:0.16rem 0 0 0.4rem;
        label{
             &.active{
                i{
                    @include bg-image('../../assets/image/btn_pre');
                }
            }
            i{
                vertical-align: top;
                display:inline-block;
                margin-right:0.1rem;
                width:0.32rem;
                height:0.32rem;
                background-size:100% 100%;
                @include bg-image('../../assets/image/btn_unpre');
            }
        }
        span{
            color:$color-focus;
        }
    }   
}
</style>